{% extends 'configmanager/__base__.html' %}
{% block title %}ECS管理 | {% endblock %}
{% block search_notice %}请输入 ECS名称 / IP地址 / 实例ID{% endblock %}
{% block content %}


    <div class="btn-toolbar container-fluid" role="toolbar">
        <div class="btn-group">
            <a href="javascript:void(0);" onclick="SyncAllECS('{{ page_obj.number }}')" type="button"
               class="btn btn-default btn-primary">同步所有ECS</a>
            <a href="javascript:void(0);" onclick="UpdateAllECSInfo('{{ page_obj.number }}')" type="button"
               class="btn btn-default btn-info">刷新所有ECS基础信息</a>
            <a href="javascript:void(0);" onclick="UpdateAllECSHealth('{{ page_obj.number }}')" type="button"
               class="btn btn-default btn-success">刷新所有ECS监控数据</a>
        </div>
    </div><br>

    <div id="whole" class="container-fluid table-responsive">

        {% if ECS_list %}
            <table class="table table-striped table-hover table-condensed">
                <thead>
                <th>区域</th>
                <th>网络类型</th>
                <th>ECS名称</th>
                <th>实例ID</th>
                <th>系统类型</th>
                <th>系统版本</th>
                <th>内网IP地址</th>
                <th>外网IP地址</th>
                <th>配置规格</th>
                <th>使用状态</th>
                <th>运行状态</th>
                <th>过期时间</th>
                <th>修改日期</th>
                <th>CPU使用率</th>
                <th>内存使用率</th>
                <th>磁盘使用率</th>
                <th>操作</th>
                </thead>
                <tbody>
                {% for ecs in ECS_list %}
                    <tr id="tr_{{ ecs.id }}"
                        class="{% if 80 < ecs.recently_cpu or 80 < ecs.recently_memory or 80 < ecs.recently_diskusage %}danger{% elif 70 < ecs.recently_cpu or 70 < ecs.recently_memory or 70 < ecs.recently_diskusage %}warning{% endif %}">
                        <td>{{ ecs.regionId }}</td>
                        <td>{{ ecs.networktype }}</td>
                        <td>{{ ecs.name }}</td>
                        <td>{{ ecs.instanceid }}</td>
                        <td>{{ ecs.ostype }}</td>
                        <td>{{ ecs.osname }}</td>
                        <td>{{ ecs.IP }}</td>
                        <td>{{ ecs.publicipaddress }}</td>
                        <td>CPU:{{ ecs.cpu }}核 内存:{{ ecs.memory }}G</td>
                        <td>
                            {% if ecs.status == 'Y' %}<span>启用</span>
                            {% else %}<span class="text-danger"><strong>禁用</strong></span>
                            {% endif %}
                        </td>
                        <td>{{ ecs.instancestatus }}</td>
                        <td>{{ ecs.expiredtime }}</td>
                        <td>{{ ecs.modified_time }}</td>
                        <td>{{ ecs.recently_cpu }}</td>
                        <td>{{ ecs.recently_memory }}</td>
                        <td>{{ ecs.recently_diskusage }}</td>
                        <td>
                            <a class="btn btn-danger" href="{% url 'configmanager:ecsdelete' ecs.id %}"
                               onclick="return confirm('Are you sure you want to delete this?')">删除</a>
                            {% if ecs.status == "Y" %}
                                <a type="button" class="btn btn-warning" href="javascript:void(0)"
                                   onclick="ECSdisable('{{ ecs.id }}', '{{ ecs.name }}', '{{ page_obj.number }}')">禁用</a>
                            {% else %}
                                <a type="button" class="btn btn-success" href="javascript:void(0)"
                                   onclick="ECSenable('{{ ecs.id }}', '{{ ecs.name }}', '{{ page_obj.number }}')">启用</a>
                            {% endif %}
                            <a type="button" class="btn btn-info" href="javascript:void(0)"
                               onclick="UpdateECSMonitor('{{ ecs.id }}', '{{ ecs.name }}', '{{ page_obj.number }}')">刷新监控数据</a>
                            <a type="button" class="btn btn-success" href="javascript:void(0)"
                               onclick="UpdateECSInfo('{{ ecs.id }}', '{{ ecs.name }}', '{{ page_obj.number }}')">刷新基础信息</a>
                        </td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        {% else %}
            <p>No ECS are available.</p>
        {% endif %}
    </div>



    <script>


        $.ajaxSetup({
            data: {csrfmiddlewaretoken: '{{ csrf_token }}'},
        });

        //局部刷新
        function PartialRefresh(ecsid, pagenumber) {
            var postUrl = "/ecs/" + ecsid + "/partrefresh/" + pagenumber + "/";
            $.post(postUrl, function (data) {
                $('#tr_' + ecsid).html(data)
            });
        }

        //主体刷新
        function WholePartialRefresh(pagenumber) {
            var postUrl = "/ecs/wholerefresh/" + pagenumber + "/";
            $.post(postUrl, function (data) {
                $('#whole').html(data)
            });
        }

        //同步所有ECS
        function SyncAllECS(pagenumber) {
            var postUrl = "/ecs/syncallecsinfo/";
            var pagenumber = pagenumber;

            jQuery('#body').showLoading();

            $.post(postUrl, function (data) {
                if (data.success) {
                    WholePartialRefresh(pagenumber);
                    $("#alert-div").css("display", "");
                    $("#alert-div").attr("class", "alert alert-success");
                    $("#alert-div").text("成功！同步所有ECS");
                    setTimeout(function () {
                        $("#alert-div").fadeOut();
                    }, 20000);
                } else {
                    alert("操作失败！" + data.message);
                }
                setTimeout(function () {
                    jQuery('#body').hideLoading();
                }, 300);
            });
        }

        //刷新所有ECS基础信息
        function UpdateAllECSInfo(pagenumber) {
            var postUrl = "/ecs/updateallinfo/";
            var pagenumber = pagenumber;

            jQuery('#body').showLoading();

            $.post(postUrl, function (data) {
                if (data.success) {
                    WholePartialRefresh(pagenumber);
                    $("#alert-div").css("display", "");
                    $("#alert-div").attr("class", "alert alert-success");
                    $("#alert-div").text("成功！刷新所有ECS基础信息");
                    setTimeout(function () {
                        $("#alert-div").fadeOut();
                    }, 20000);
                } else {
                    alert("操作失败！" + data.message);
                }
                setTimeout(function () {
                    jQuery('#body').hideLoading();
                }, 300);
            });
        }

        //刷新所有ECS监控信息
        function UpdateAllECSHealth(pagenumber) {
            var postUrl = "/ecs/updateallmonitor/";

            jQuery('#body').showLoading();

            $.post(postUrl, function (data) {
                if (data.success) {
                    WholePartialRefresh(pagenumber);
                    $("#alert-div").css("display", "");
                    $("#alert-div").attr("class", "alert alert-success");
                    $("#alert-div").text("成功！刷新所有ECS监控信息");
                    setTimeout(function () {
                        $("#alert-div").fadeOut();
                    }, 20000);
                } else {
                    alert("操作失败！" + data.message);
                }
                setTimeout(function () {
                    jQuery('#body').hideLoading();
                }, 300);
            });
        }

        //禁用ECS
        function ECSdisable(ecsid, ecsname, pagenumber) {
            var postUrl = "/ecs/" + ecsid + "/disable/";
            var ecsname = ecsname

            jQuery('#body').showLoading();

            $.post(postUrl, function (data) {
                if (data.success) {
                    PartialRefresh(ecsid, pagenumber);
                    $("#alert-div").css("display", "");
                    $("#alert-div").attr("class", "alert alert-warning");
                    $("#alert-div").text("成功！禁用ECS " + ecsname);
                    setTimeout(function () {
                        $("#alert-div").fadeOut();
                    }, 20000);
                } else {
                    alert("操作失败！" + data.message);
                }
                setTimeout(function () {
                    jQuery('#body').hideLoading();
                }, 300);
            });
        }

        //启用ECS
        function ECSenable(ecsid, ecsname, pagenumber) {
            var postUrl = "/ecs/" + ecsid + "/enable/";
            var ecsname = ecsname

            jQuery('#body').showLoading();

            $.post(postUrl, function (data) {
                if (data.success) {
                    PartialRefresh(ecsid, pagenumber);
                    $("#alert-div").css("display", "");
                    $("#alert-div").attr("class", "alert alert-success");
                    $("#alert-div").text("成功！启用ECS " + ecsname);
                    setTimeout(function () {
                        $("#alert-div").fadeOut();
                    }, 20000);
                } else {
                    alert("操作失败！" + data.message);
                }
                setTimeout(function () {
                    jQuery('#body').hideLoading();
                }, 300);
            });
        }


        //刷新ECS监控数据
        function UpdateECSMonitor(ecsid, ecsname, pagenumber) {
            var postUrl = "/ecs/" + ecsid + "/updatemonitor/";
            var ecsname = ecsname

            jQuery('#body').showLoading();

            $.post(postUrl, function (data) {
                if (data.success) {
                    PartialRefresh(ecsid, pagenumber);
                    $("#alert-div").css("display", "");
                    $("#alert-div").attr("class", "alert alert-success");
                    $("#alert-div").text("成功！刷新监控数据 " + ecsname);
                    setTimeout(function () {
                        $("#alert-div").fadeOut();
                    }, 20000);
                } else {
                    alert("操作失败！" + data.message);
                }
                setTimeout(function () {
                    jQuery('#body').hideLoading();
                }, 300);
            });
        }

        //刷新ECS基础数据
        function UpdateECSInfo(ecsid, ecsname, pagenumber) {
            var postUrl = "/ecs/" + ecsid + "/updateinfo/";
            var ecsname = ecsname

            jQuery('#body').showLoading();

            $.post(postUrl, function (data) {
                if (data.success) {
                    PartialRefresh(ecsid, pagenumber);
                    $("#alert-div").css("display", "");
                    $("#alert-div").attr("class", "alert alert-success");
                    $("#alert-div").text("成功！刷新基础数据 " + ecsname);
                    setTimeout(function () {
                        $("#alert-div").fadeOut();
                    }, 20000);
                } else {
                    alert("操作失败！" + data.message);
                }
                setTimeout(function () {
                    jQuery('#body').hideLoading();
                }, 300);
            });
        }


    </script>

{% endblock %}




